<template>
  <el-input v-bind="$attrs" v-model.trim="price" :disabled="Disabled">
    <template slot="prepend">￥</template>
    <template slot="append">元</template>
  </el-input>
</template>
<script>
// 输入金额，自动处理为分传出去
// 价格组件，商品信息中价格通常显示的是元为单位，但是后台计算是以分为计算单位，这样就需要做一个转化。此组件为一个el-input的包装组件，显示以元为单位，保存的数据以分为单位，以便减少在页面中出参和入参的处理
import currency from 'currency.js'
export default {
  name: 'PriceInput',
  inject: {
    elForm: {
      default: {}
    }
  },
  props: {
    value: '',
    /**
     * 返回实际的金额数值，以元为单位，方便外部做表单校验，使表单校验提示与真实输入一致
     * 如
      <el-form-item
        label="加床价格"
        :prop="`extraBedData.__extraBedFee`"
        :verify="{ type: 'int', gt: 0, lte: 999 }"
      >
        <PriceInput
          v-model.trim="extraBedData.extraBedFee" // 如果使用extraBedFee做表单校验值，就算值小于999，也因为是分而报超出
          :yuan.sync="extraBedData.__extraBedFee"
        />
      </el-form-item>
     */
    yuan: '',
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      price: undefined
    }
  },
  watch: {
    price: {
      handler (n) {
        this.$emit(
          'input',
          this.$isEmpty(n) ? undefined : currency(n).multiply(100).value
        )
        this.$emit('update:yuan', n)
      }
    },
    value: {
      immediate: true,
      handler (n) {
        this.price = this.$isEmpty(n) ? undefined : currency(n).divide(100).value
      }
    }
  },
  computed: {
    Disabled () {
      return this.elForm.disabled || this.disabled
    }
  },
  methods: {

  }
}
</script>
